<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('滚动到指定位置')}`">{{ $t('滚动到指定位置') }}</t>
            <li>
                <span class="s-code">scrollTo(x, y)</span>滚动到指定坐标
            </li>
            <li>
                <span class="s-code">setScrollTop(top)</span>设置垂直滚动位置
            </li>
            <li>
                <span class="s-code">setScrollLeft(left)</span>设置水平滚动位置
            </li>
            <li>
                <span class="s-code">scrollToRow(row | rowKey)</span>根据行数据或<span class="d-code">row-key</span>滚动到对应行
            </li>
            <li>
                <span class="s-code">scrollToRowIndex(index)</span>根据行索引滚动到指定行
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="scrollTo(300, 300)">滚动至 [300, 300]</el-button>
            <el-button @click="setScrollTop">设置垂直滚动距离 200px</el-button>
            <el-button @click="setScrollLeft">设置水平滚动距离 200px</el-button>
            <el-button @click="scrollToRow">滚动到 ID 为 10 的行</el-button>
            <el-button @click="scrollToRowIndex">滚动到第 18 行</el-button>
            <el-button @click="scrollTo(0, 0)">还原</el-button>
        </div>
        <sib-table ref="sibTable" :index-config="{ type: 'hidden' }" :page-size="50" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(30).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));

        return {
            sibTable,
            tableColumn: [
                { label: 'ID', code: 'id' },
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
                { label: 'a', code: 'a' },
                { label: 'b', code: 'b' },
                { label: 'c', code: 'c' },
                { label: 'd', code: 'd' },
                { label: 'e', code: 'e' },
                { label: 'f', code: 'f' },
                { label: 'g', code: 'g' },
            ].map((d) => ({ ...d, width: 300 })),
            tableData,
            scrollTo(x, y) {
                sibTable.value.scrollTo(x, y);
            },
            setScrollTop() {
                sibTable.value.setScrollTop(200);
            },
            setScrollLeft() {
                sibTable.value.setScrollLeft(200);
            },
            scrollToRow() {
                const targetRow = tableData.value.find(({ id }) => id === 10);
                sibTable.value.scrollToRow(targetRow);
            },
            scrollToRowIndex() {
                sibTable.value.scrollToRowIndex(17);
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="scrollTo(300, 300)">滚动至 [300, 300]</el-button>
            <el-button @click="setScrollTop">设置垂直滚动距离 200px</el-button>
            <el-button @click="setScrollLeft">设置水平滚动距离 200px</el-button>
            <el-button @click="scrollToRow">滚动到 ID 为 10 的行</el-button>
            <el-button @click="scrollToRowIndex">滚动到第 18 行</el-button>
            <el-button @click="scrollTo(0, 0)">还原</el-button>
        </div>
        <sib-table ref="sibTable" :index-config="{ type: 'hidden' }" :page-size="50" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(30).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));

        return {
            sibTable,
            tableColumn: [
                { label: 'ID', code: 'id' },
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
                { label: 'a', code: 'a' },
                { label: 'b', code: 'b' },
                { label: 'c', code: 'c' },
                { label: 'd', code: 'd' },
                { label: 'e', code: 'e' },
                { label: 'f', code: 'f' },
                { label: 'g', code: 'g' },
            ].map((d) => ({ ...d, width: 300 })),
            tableData,
            scrollTo(x, y) {
                sibTable.value.scrollTo(x, y);
            },
            setScrollTop() {
                sibTable.value.setScrollTop(200);
            },
            setScrollLeft() {
                sibTable.value.setScrollLeft(200);
            },
            scrollToRow() {
                const targetRow = tableData.value.find(({ id }) => id === 10);
                sibTable.value.scrollToRow(targetRow);
            },
            scrollToRowIndex() {
                sibTable.value.scrollToRowIndex(17);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
